<template>
    
    <!-- 组件的模板 -->
    <div class="page user-select multi-select">

       <ul class="list com-border-top com-border-bottom" style="margin-top:0" :style="isIphoneX?'margin-bottom: 37px;':''">
            <li class="weui-cells_checkbox has-hierarchy"  v-for='group in grouplist'>
                <label class="touch" for="{{group.id}}">
                     <input value="{{group.id}}" 
                             v-model="selectGroupList" 
                             type="checkbox" 
                             class="weui-check" 
                             name="checkbox1" 
                             id="{{group.id}}"
                             @change="selectGroup(group,$event)"
                      >
                    <i class="weui-icon-checked"></i>
                    <div class="info com-border-bottom">
                        <span class="deleted" v-if="group.status == 2">已删除</span>
                        <p class="title regular_name" :class="{'no-nextGroup': !(group.children.length)}">{{group.name}}</p>
                    </div>
                </label>
            </li>
      </ul>

        <div class="count bg-color com-border-top weui-cells_checkbox" :style="isIphoneX?'height: 75px;':''" v-if="grouplist.length">
            <label for="sa">
                <input type="checkbox" class="weui-check" name="select-all" id="sa" :checked="isSelectAll"  @click="selectAll($event)">
                <i class="weui-icon-checked"></i><span>全选</span>                
            </label>
            <span class="num">已选择：<em>{{selectGroupList.length}}个</em></span>
            <a class="mod-btn-s-1" @click="submitResult" href="javascript:;">确定</a>
        </div>
    </div>
</template>

<script>
    let pageDate = {}
    let webViewID = ''
    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    import widget from 'gapi/widget'
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import * as util from 'js/util.js'
    import GroupUtil from 'js/GroupUtil.js'
    import Scroller from 'vux/dist/components/scroller'
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */

    /**
     *  组件实例对象
     */
    export default {
        components: {
          Scroller
        },
        data: function(){
            return{
                group:{},
                hierarchyList:[],
                selectGroupList:[],
                grouplist:[],
                cacheGroupList:[],
                isChooseAll: true,
            }
        },
        watch: {
          'hierarchyList': function(){
            let allWidth = 0
            this.$nextTick(function () {
              if($('.scroller-wrap .nav-item').length){
                $('.scroller-wrap .nav-item').each(function(i, o){
                  if(o.tagName.toLowerCase() == 'a'){
                    allWidth += (parseInt(o.offsetWidth) + 16)
                  }else{
                    allWidth += parseInt(o.offsetWidth)
                  }
                })
                allWidth += 30
                $('.scroller-wrap').width(allWidth + 'px')

                this.$refs.scrollerdom.reset()
              }
            })
          }
        },
        computed: {
            isSelectAll (){
                 let result = false
                 if(this.grouplist.length){
                    result = true
                    this.grouplist.forEach((item)=>{
                      if(this.selectGroupList.indexOf(item.id+'')==-1){
                            result = false
                      }
                    })
                 }
                return result
            },
            isIphoneX: function(){
                return util.isIphoneX()
            }
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
               cache.getMemoryCache('selectMultipleTask', (data) => {
                    if(data.id){
                        this.selectGroupList = data.id
                    } 
                })
                cache.getCache('KqCacheMessge',(data)=>{
                    pageDate.project_id = data.project_id
                    pageDate.team_id = data.team_id
                    pageDate.user_id = data.user_id

                    this.id = util.getUrddataString('id')
                    if(this.id){
                          cache.getMemoryCache('cacheGroupList', (data) => {
                              if(data){
                                  this.group = new GroupUtil(data)
                                  this.showGroup(this.id,this.group.group)
                              }
                          })
                    }else{
                          this.getTaskList()
                    }
                })
                commonPage.getWebViewID((data)=>{
                    webViewID = data
                })
            },
            /**
             * 当选中小组时，判断该小组的子小组是否被选中，若有被选中的子小组，则清除掉
             * @param  {[type]} group [description]
             * @param  {[type]} event [description]
             * @return {[type]}       [description]
             */
            selectGroup(group,event){
                  let list = []
                  let id = group.id
                  let label = event.target.checked
                  let getChildren = (group)=>{
                      group.forEach((item)=>{
                          if(this.selectGroupList.indexOf(item.id+'')>-1){
                              list.push(item.id+'')
                          }
                          if(item.children.length){
                              getChildren(item.children)
                          }
                      })
                  }
                  if(label&&group.children.length){
                      getChildren(group.children)
                      this.selectGroupList = this.group.removeArrarItem(this.selectGroupList,list)
                  }
            },
            //全选按钮
            selectAll(event){
                let label = event.target.checked
                let list = []
                if(this.isChooseAll && (this.selectGroupList.length != this.grouplist.length)){     
                    this.selectGroupList = []               
                    this.grouplist.forEach((item) => {
                        this.selectGroupList.push(item.id+ '')
                    })
                }else{
                    this.selectGroupList = []
                }
                this.isChooseAll = !this.isChooseAll
            },
            // 当前页面数据处理
            showGroup(id,list){
                  list.some((item)=>{
                    if(item.id==id){
                        this.hierarchyList = item.path
                        this.grouplist = item.children
                        let len = this.hierarchyList.length-1
                        cache.setMemoryCache('webViewID'+len,{'webViewID':webViewID})//保存当前页面唯一标识，点击面包屑使用
                        return true
                    }else{
                        this.showGroup(id,item.children)
                    }
                })
            },
            // 获取考勤任务列表
            getTaskList (){
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/attendance/attendance_task_names',
                    data: {
                        team_id: pageDate.team_id,
                        project_id: pageDate.project_id,
                        page_size: 10000
                    },
                    success: (res) => {
                        console.log("考勤任务列表"+JSON.stringify(res))
                        if(res.errno == 0){                            
                            // 请求数据成功
                            this.cacheGroupList = res.data
                            this.grouplist = res.data


                        }else{
                            widget.toast('服务器异常')
                        }
                        
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    error: (xhr, error) => {
                        widget.toast('服务器异常')
                        commonPage.loadPageStatus('loadSuccess')
                    },
                    noNetwork: () => {
                        // 无网络的回调
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            //提交
            submitResult() {
                console.log(this.selectGroupList)
                var selectMultipleTask = this.selectGroupList
                let GroupNameList = []
                this.selectGroupList.forEach((selG) => {
                  this.grouplist.forEach((allG) => {
                    if(selG == allG.id){
                      GroupNameList.push(allG.name)
                    }
                  })
                })
                cache.getMemoryCache('webViewID',(data)=>{
                    if(data){
                      commonPage.goBack(1,{'goBackKey':'submit','key':'selectMultipleTask','value':selectMultipleTask,name: GroupNameList},data.webViewID)
                    }
                })
            }
        },
        created(){
            this.init()
            window.loadData = (data)=>{
              console.log(data)
                if(data&&data.key == 'selectMultipleTask'){
                    this.selectGroupList = data.value
                }
            }
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>
<style>
    .scroller-wrap .nav-item{
        float: left;
    }
    .mod-crumbs .arrow.nav-item{
        margin: 18px 8px;
    }
    .xs-container{
        background: #fff;
    }
    .deleted{
        display: inline-block;
        width: 40px;
        height: 16px;
        opacity: 0.6;
        background: #949AA8;
        font-size: 12px!important;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 16px;
        margin-right: 6px;
        border: solid 1px #949AA8;
        border-radius: 2px;
        text-align: center;
    }
    .regular_name{
        font-size: 16px!important;
    }
</style>
